// H5 专用样式文件
/* #ifdef H5 */

// H5 环境下的全局样式重置
body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background-color: #f8f8f8;
}

// 滚动条美化
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

// 页面容器适配
.uni-page-body {
  padding-bottom: env(safe-area-inset-bottom);
}

// tabbar 适配
.uni-tabbar {
  padding-bottom: env(safe-area-inset-bottom);
}

// 模态框在H5下的样式优化
.modal {
  backdrop-filter: blur(5px);
  
  .modal-content {
    max-width: 90vw;
    max-height: 80vh;
    animation: modalSlideIn 0.3s ease-out;
  }
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

// 响应式设计
@media screen and (min-width: 768px) {
  .uni-app--showlayout {
    .uni-page-wrapper {
      max-width: 414px;
      margin: 0 auto;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }
  }
}

// 移动端手势优化
.feature-item,
.game-card,
.tool-item {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

// PWA 适配
@media (display-mode: standalone) {
  body {
    background-color: #f8f8f8;
    user-select: none;
  }
}

// 横屏适配
@media screen and (orientation: landscape) and (max-height: 500px) {
  .welcome-section {
    margin-bottom: 15px;
  }
  
  .section-title {
    margin-bottom: 10px;
  }
  
  .features-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* #endif */